<template>
  <view class="container">
    <div class="page-top "></div>

    <view style="width: 90%;margin: auto">
      <view class="add_car" @click="add_car">
        <van-row>
          <van-col span="4">
            <view>
              <van-icon name="add-o" size="30px"/>
            </view>
          </van-col>
          <van-col span="20">
            <view class="item_label">
              <text>添加车辆</text>
            </view>
          </van-col>
        </van-row>
      </view>

      <view class="detail" v-for="(car,index) in cars" :key="index">

        <van-row>
          <van-col span="4">
            <view><img src="http://aczxsj.ctmon.com.cn/pc/acimg/a18.png" class="kbimg"></view>
          </van-col>
          <van-col span="20">
            <view class="carname">
              <text>车辆名称：{{ car.car_name }}（{{ car.color }}）</text>
            </view>
            <view class="carnum">
              <text>车牌号：{{ car.car_no }}</text>
            </view>
          </van-col>
        </van-row>

        <van-divider/>
        <view style="text-align: right">
          <van-button round color="#6173ad" size="small" style="margin-right: 10px" @click="onEditCar(car.id)">修改</van-button>
          <van-button round color="#ff9800" size="small" @click="onDelCar(car.id)">删除</van-button>
        </view>
      </view>

    </view>


  </view>
</template>

<script>
import {delCar, getCars} from "../../../requests/merchant/car";
import {showToast} from "../../../requests/tools";

var $this;
export default {
  name: 'CarsContainer',
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      cars: []
    }
  },
  // 方法集合
  methods: {
    onGetCar() {
      getCars().then(res => {
        $this.cars = res.data;
      })
    },
    add_car() {
      mpvue.navigateTo({
        url: "/pages/merchant/car/add/main",
      })
    },
    onEditCar(id){
      mpvue.navigateTo({
        url: "/pages/merchant/car/add/main?id=" + id,
      })
    },
    onDelCar($id) {
      wx.showModal({
        title: '提示',
        content: '是否删除',
        success(res) {
          if (res.confirm) {
            delCar($id).then(res => {
              showToast(res.code === 0, res.msg);
              $this.onGetCar();
            })
          }
        }
      })

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    $this = this;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onShow() {
    /**
     * 获取车辆列表
     */
    $this.onGetCar();
  },
}
</script>

<style>
@import "index.css";

</style>
